<template>
    <div>
        <div class="bg"></div>
        <div style="height: 12vh"></div>
        <div class="chart" v-loading="loading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading">
            <div id="my" style="width:100%;height:100%;"></div>
        </div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        name: "Static",
        data(){
            return{
                Mydata:'',
                MyChart:'',
                loading:true,
                flag:false,
            }
        },
        mounted() {
            this.init()
        },
        created() {
            this.getMy()
        },
        methods:{
            // 初始化
            init(){
                var chartDom = document.getElementById('my');
                this.Mychart = echarts.init(chartDom);
                this.flag = true
            },
            async getMy(){
                const { data: res } = await this.$http.get('/user/count/'+localStorage.getItem("username"))
                if (res.code !== 200) {
                    this.loading = false
                    return this.WarningMsg(res.msg)
                }
                this.Mydata = res.data
                this.DrawMy(res.data)
                if(this.flag){
                    this.loading = false
                }
            },
            DrawMy(list){
                let myChart = this.Mychart
                // 绘制图表
                myChart.setOption({
                    roseType: 'area',
                    title: {
                        text: '我的问答对比',
                        left: 'center'
                    },
                    // default: 'pie',
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        // right: 'right',
                        bottom: 'bottom',

                    },
                    series: [
                        {
                            name: '问答数',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                {value: list.askNum, name: '提问数'},
                                {value: list.answerNum, name: '评论数'},
                                // {value: week, name: '本周'},
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            grid: {
                                bottom: 10
                            }
                        }

                    ]
                });
            },
            WarningMsg(msg) {
                const h = this.$createElement;
                this.$notify.warning({
                    title: '提示',
                    message: h('p', {style: 'color: teal'}, msg),
                    offset: 100,
                    duration: 3000
                });
            },
        }
    }
</script>

<style scoped>
    .chart{
        margin: auto;
        height: 68vh;
        display: flex;
        justify-content: center;
    }
    .bg{
        background: url(../../assets/img/ask.jpg);
        background-size: 100% 100%;
        height: 100%;
        opacity: 0.18;
        position: fixed;
        width: 100%;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
</style>
